const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const happypack = require("happypack")
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let webpack = require("webpack")

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {  //缓存组
                common: {
                    chunks: "initial",
                    minSize: 0,
                    minChunks: 2   //引用次数大于2就抽离出来
                },
                vendor: {
                    priority: 1,    //权重,不设置时common先执行,就不会再抽取三方库,闲设置后,先抽离第三方抽离
                    test: /node_modules/,
                    chunks: "initial",
                    minSize: 0,
                    minChunks: 2
                }
            }

        }
    },

    resolve: {
        modules: [path.join(__dirname, '/node_modules')],
        alias: {
            '@': path.join(__dirname, '/src'),//此resolve通常是外面定义的一个nodejs的函数，用于生成绝对路径
        },
        extensions: ['.js', '.vue', '.json'],
        // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
        mainFields: ['jsnext:main', 'browser', 'main']
    },
    // entry: "./src/main.js",
    // output: { path: path.join(__dirname, "bundle"), filename: "[name].js" },
    plugins: [
        // new MiniCssExtractPlugin({ 
        //     filename: "css/[name].[hash].css",
        //     chunkFilename: 'css/[id].[hash].css',
        //  }),
        new webpack.ProvidePlugin({
            axios: 'axios',
            echarts: "echarts"
        }),
        new ModuleConcatenationPlugin(),
        new HtmlWebpackPlugin({ template: "./public/home/index.html" }),
        new VueLoaderPlugin(),
        new happypack({
            id: "js",
            use: [
                {
                    loader: "babel-loader", options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            "@babel/plugin-syntax-dynamic-import"
                        ]
                    }
                }
            ]
        }),
        new happypack({
            id: "css",
            use: ["style-loader", "css-loader"]
        }),
        new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, "dist", "manifest.json")
        })
    ],
    module: {
        // noParse: /jquery|wangeditor|element-ui/,
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 超过 8k 就不转 base64, 小于 8k 才转
                            limit: 8 * 1024,
                            name: '[name].[ext]',
                            publicPath: "/src/assets/img",
                            outputPath: "images/"
                        }
                    }
                ]
            },
            { test: /\.js$/, use: "happypack/loader?id=js", exclude: /node_modules/ },
            { test: /\.css$/, use: "happypack/loader?id=css" },
            { test: /\.vue$/, use: "vue-loader" },
            {
                test: /\.less$/,
                use: [
                    //   {
                    //     loader: MiniCssExtractPlugin.loader,
                    //     options: {
                    //         publicPath:'../',
                    //     },
                    //   }, 
                    "style-loader",
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}